{{extend './layout.htm'}}

{{block 'css'}}
<link href="/static/common/highlight/default.min.css" rel="stylesheet">
{{/block}}

{{block 'header'}}
<!-- <div class="container jumbotron">
    <h1>{{article.title}}</h1>
    <p>时间: {{article.add_time | dateFormat 'YYYY-mm-dd HH:ii'}} &nbsp;浏览: {{article.click}} &nbsp;作者: {{article.writer}}
        &nbsp;来源: <a href="{{article.source_url || url(':article', {id: article.id})}}">{{article.source}}</a></p>
</div> -->
{{/block}}

{{block 'content'}}
<div class="container max-w-screen-xl mx-auto mt-4 flex-grow px-5 lg:px-0" id="content">
    <div class="lg:mx-5">
        <div class="grid grid-cols-3 gap-4">
            <div class="col-span-3 lg:col-span-2 dark:text-white">
                <div class="bg-white dark:bg-warmgray-900 p-5 my-4">
                    <h1 class="mb-2 text-4xl font-bold">{{article.title}}</h1>
                    <aside id="meta">
                        <div>
                            <section>
                                <h4 id="date"><span class="icon-access_time mr-2"></span>{{article.add_time | dateFormat
                                    'YYYY-mm-dd'}}
                                </h4>
                            </section>
                            <!-- <div id="tags">
                                <span class="icon-local_offer mr-1"></span>
                                <a href="https://blonde.pages.dev/tags/themes">themes</a> |
                            </div> -->
                        </div>
                    </aside>
                    <article class="prose md:prose-lg lg:prose-xl max-w-none dark:prose-invert mt-5 content">
                        {{@article.content}}
                    </article>
                    <div class="bg-white dark:bg-warmgray-900 p-5 my-4">
                        <div class="grid grid-cols-2">
                            {{if prevOne}} <div class="col-span-1">
                                <a class="previous lg:text-2xl" href="{{url(':article', {id: prevOne.id})}}">
                                    <div
                                        class="transition-colors duration-300 border border-gray-600 hover:border-black h-auto m-3 text-center py-3 lg:py-1">
                                        <!-- <span class="icon-keyboard_arrow_left"></span> --> 
                                        上一篇:{{prevOne.title}}
                                    </div>
                                </a>
                            </div>
                            {{/if}}

                            {{if nextOne}} <div class="col-span-1">
                                <a class="previous lg:text-2xl" href="{{url(':article', {id: nextOne.id})}}">
                                    <div
                                        class="transition-colors duration-300 border border-gray-600 hover:border-black h-auto m-3 text-center py-3 lg:py-1">
                                        <!-- <span class="icon-keyboard_arrow_right"></span> --> 
                                        下一篇:{{nextOne.title}} 
                                    </div>
                                </a>
                            </div>
                            {{/if}}
                        </div>
                    </div>

                    {{if is_comment}}
                    <!-- <hr class="m-hr" /> -->
                    <div class="comment">
                        <h3 class="title">评论</h3>
                        <form class="comment-form" action="{{url('comment/post')}}">
                            <input type="hidden" name="article_id" value="{{article.id}}" />
                            <input type="hidden" name="pid" value="0" />
                            <div class="comment-input">
                                <input class="input" type="text" name="uname" placeholder="昵称(必填)" />
                                <input class="input" type="email" name="email" placeholder="邮箱(选填)" />
                                <input class="input" type="url" name="url" placeholder="网址(选填)" />
                            </div>
                            <div class="comment-area">
                                <textarea class="input c-area" name="content" placeholder="写点什么吧"></textarea>
                            </div>
                            <div class="comment-button">
                                <span class="button submit">提交</span><span class="button danger cancel">取消回复</span>
                            </div>
                        </form>
                        <div class="comment-list" data-url="{{url('comment/list', {id: article.id})}}">
                            <div class="comment-item">
                                <div class="face" data-id="[id]" data-uname="[uname]">[face]<span>@</span></div>
                                <div class="comment-body">
                                    <div class="comment-user"><a href="[url]" target="_blank">[uname]</a> &nbsp;<span>[add_time]</span></div>
                                    <div class="comment-content">[content]</div>
                                    [reply]
                                </div>
                            </div>
                        </div>
                        <div class="comment-more">加载更多评论</div>
                    </div>
                    {{/if}}
                </div> 
            </div>
            {{include './aside.htm'}}
        </div>
    </div>
</div> 
{{/block}}

{{block 'js'}}
<script src="/static/common/jdenticon/jdenticon.js"></script>
<script src="/static/common/highlight/highlight.min.js"></script>
<script src="/static/common/vue/3.2.37.js"></script>
<script src="/static/admin/layui-vue/1.1.0.js"></script>
<script src="/static/common/bmap/1.0.1.js"></script>
<script src="/static/content.js"></script>
{{/block}}